@themeColors:#8279ea;

.tabs {
    // tabs 头部
    .tabs-head {
        height: 100rpx;
        background-color: @themeColors;
        // color: #73ceff;
        color: #9d94ff;
        display: flex;
        border-bottom: 1rpx solid #b6afff;
        position: fixed;
        width: 100%;
        top: 0;
        left: 0;
        z-index: 10;
        box-sizing: border-box;
      .tabs-head-item {
          flex: 1;
          font-size: 28rpx;
          text-align: center;
          line-height: 100rpx;
      }
      .active{
          color: #fff;
          font-size: 32rpx;
          position: relative;
          &::before{
              position: absolute;
              bottom: -2rpx;
              transform: translateX(-50%);
              left: 50%;
              content: "";
              display: inline-block;
              width: 82rpx;
              height: 4rpx;
              background-color: #fff;

          }
      }
      .history-icon{
          position: absolute;
          right: 25rpx;
          top: 50%;
          transform: translateY(-50%);
          width: 40rpx;
          height: 40rpx;
          text{
            color: #fff;
            font-size: 40rpx;
          } 
      }
    }

    // 内容
    .tabs-content {
        margin-top: 100rpx;
        .tabs-content-item {
            min-height: 100vh;
            // background-color: #e7eaf3;
            position: relative;
        //   报告详情
          // 体重数据
          .weight-data {
              height: 320rpx;
              background-color: @themeColors;
              overflow: hidden;
              text-align: center;
              position: relative;
            .weight-data-date {
                margin-top: 30rpx;
                font-size: 24rpx;
                color: #ffffff;
                font-weight: lighter;
                letter-spacing: 2rpx;
            }
            .weight-data-val{
                margin-top: 15rpx;
                color: #d2cefd;
                position: relative;
                .text{
                    font-size: 100rpx;
                }
                .digit{
                    font-size: 45rpx;
                }
                .kg{
                    font-size: 30rpx;
                    position: absolute;
                    right: 290rpx;
                    top: 22rpx;
                }
            }
            .weight-data-contrast {
                margin-top: 10rpx;
                color: #fff;
                font-size: 28rpx;
                // letter-spacing: 2rpx;
                text{
                    font-size: 36rpx;
                }
            }
            .weight-data-type{
                position: absolute;
                right: 150rpx;
                top: 150rpx;
                .content{
                    width: 80rpx;
                    height: 40rpx;
                    background-color: #d2cefd;
                    color: #8279ea;
                    font-size: 20rpx;
                    line-height: 40rpx;
                    position: relative;
                    text-align: left;
                    // text-indent: 6rpx;
                    text-align: center;
                }
                .content::before{
                    content: "";
                    display: inline-block;
                    position: absolute;
                    left: -37rpx;
                    top: 0;
                    border-top: 20rpx solid transparent;
                    border-right: 20rpx solid #d2cefd;
                    border-bottom: 20rpx solid transparent;
                    border-left: 20rpx solid transparent;
                }
            }
          }
          //   体型
          .body-type {
            background-color: #fff;
            overflow: hidden;
          .body-type-title {
              padding: 0 28rpx;
              .body-type-title-content {
                  border-bottom: 1px solid #e5e5e5;
                  height: 100rpx;
                  display: flex;
                  justify-content:space-between;
                  align-items: center;
                  .left {
                      font-size: 34rpx;
                  }
          
                  .right {
                      font-size: 28rpx;
                      color: @themeColors;
                  }
              }
          }
          .body-type-content {
              margin-top: 25rpx;
              .body-type-item {
                  height: 246rpx;
                  padding:32rpx 0;
                  box-sizing: border-box;
                  float: left;
                  width: 25%;
                  .center{
                      display: flex;
                      justify-content: center;
                  }
                  .icon {
                      margin: 0 auto;
                      width: 60rpx;
                      height: 60rpx;
                      image{
                          width: 100%;
                          height: 100%;
                      }
                  }
              
                  .title {
                      .center();
                      margin-top: 10rpx;
                      color: #9d9d9d;
                      font-size: 26rpx
                  }
              
                  .value {
                      .center();
                      margin-top: 9rpx;
                      font-size: 30rpx
                  }
              
                  .standard {
                      .center();
                      margin-top: 9rpx;
                      font-size: 24rpx;
                      color: #fff;
                      text{
                          padding:0 18rpx;
                          border-radius: 20rpx;
                      }
                      .empty{
                          background-color: #999999;
                      }
                      .good{
                          background-color: #13c600;
                      }
                      .bad{
                          background-color: #ff2d11;
                      }
                  }
              }
          }
          }
          // 深度分析
          .deep-analysis{
            // height: 1050px;
            min-height: 100vh;
            // background-color: #e7eaf3;
            // 人体数据
            .body-data {
                background-image: linear-gradient(#8874f9, #8670f0);
                overflow: hidden;
                height: 734rpx;
                .body-img-date {
                    height: 32rpx;
                    text-align: center;
                    margin-top: 30rpx;
                    font-size: 24rpx;
                    color: #ffffff;
                    letter-spacing: 1rpx;
                }
            
                .body-img-content {
                    width: 334rpx;
                    height: 558rpx;
                    margin: 10rpx auto 0;
                    image{
                        width: 100%;
                        height: 100%;
                    }
                }
            }
            //达标和不达标
            .compliance-no-compliance{
                position: absolute;
                top: 644rpx;
                left: 0;
                width: 100%;
                padding-bottom: 18rpx;
                    //不达标
                    .no-compliance {
                        padding: 0 18rpx;
                        width: 100%;
                        box-sizing: border-box;
                        margin-bottom: 15rpx;
                        .no-compliance-container{
                            background-color: #fff;
                            border-radius: 20rpx;
                            padding: 0 32rpx;
                            box-shadow: 0 15rpx 30rpx rgb(0 0 0 / 10%);
                            &::after{
                                content: "";
                                display: block;
                                height: 64rpx;
                            }
                        .no-compliance-title {
                            height: 74rpx;
                            border-bottom: 1rpx solid #e6e6e6;
                            font-size: 28rpx;
                            line-height: 74rpx;
                            color: #ff2a00;
                            .text {
                        
                            }
                            }
                        
                        .no-compliance-content {
                            .no-compliance-item {
                                .no-compliance-item-top{
                                    display: flex;
                                    .item-icon {
                                        width: 96rpx;
                                        height: 115rpx;
                                        image{  
                                            margin-top: 15rpx;
                                            width: 60rpx;
                                            height: 60rpx;
                                        }
                                        }
                                
                                        .item-content {
                                            flex: 1;
                                            padding-bottom: 20rpx;
                                            border-bottom: 1rpx solid #e6e6e6;
                                        .item-content-title {
                                            position: relative;
                                            margin-top: 24rpx;
                                        .title-text {
                                            font-size: 32rpx;
                                            margin-right: 46rpx;
                                            }
                                
                                        .title-val {
                                            font-size: 30rpx;
                                            font-weight: bold;
                                            }
                                
                                        .title-standard {
                                            position: absolute;
                                            top: -5rpx;
                                            right: 66rpx;
                                            padding:0 18rpx;
                                            border-radius: 20rpx;
                                            background-color: #ff2d11;
                                            font-size: 24rpx;
                                            color: #fff;
                                            }
                                            .show-hidden {
                                            position: absolute;
                                            top: -15rpx;
                                            right: 24rpx;
                                            width: 30rpx;
                                            height: 30rpx;
                                            color: #b0b0b0;
                                            text{
                                                font-size: 30rpx;
                                            }
                                            }
                                        }
                                
                                        .item-content-info {
                                            color: #8b8b8b;
                                            font-size: 24rpx;
                                        }
                                        }
                                }
                                .no-compliance-item-bottom{
                                    background-color: #eff2fb;
                                    font-size: 24rpx;
                                    padding: 30rpx 15rpx;
                                    border-radius: 5rpx;
                                }
                        

                            }
                        }
                        }
                    }
                    // 达标
                    .compliance {
                        margin-bottom: 15rpx;
                        padding: 0 18rpx;
                        width: 100%;
                        box-sizing: border-box;
                        // background-color: #e3e6ee;
                        .compliance-container{
                            background-color: #fff;
                            border-radius: 20rpx;
                            padding: 0 32rpx;
                            box-shadow: 0 15rpx 30rpx rgb(0 0 0 / 10%);
                            &::after{
                                content: "";
                                display: block;
                                height: 64rpx;
                            }
                            .compliance-title {
                                height: 74rpx;
                                border-bottom: 1rpx solid #e6e6e6;
                                font-size: 28rpx;
                                line-height: 74rpx;
                                color: #05c400;
                                .text {
                            
                                }
                            }
                            
                            .compliance-content {
                                .compliance-item {
                                .compliance-item-top{
                                    display: flex;
                                    .item-icon {
                                        width: 96rpx;
                                        height: 115rpx;
                                        image{  
                                            margin-top: 15rpx;
                                            width: 60rpx;
                                            height: 60rpx;
                                        }
                                    }
                                
                                    .item-content {
                                        flex: 1;
                                        padding-bottom: 20rpx;
                                        border-bottom: 1rpx solid #e6e6e6;
                                        .item-content-title {
                                            position: relative;
                                            margin-top: 24rpx;
                                        .title-text {
                                            font-size: 32rpx;
                                            margin-right: 46rpx;
                                        }
                                
                                        .title-val {
                                            font-size: 30rpx;
                                            font-weight: bold;
                                        }
                                
                                        .title-standard {
                                            position: absolute;
                                            top: -5rpx;
                                            right: 66rpx;
                                            padding:0 18rpx;
                                            border-radius: 20rpx;
                                            background-color: #05c400;
                                            font-size: 24rpx;
                                            color: #fff;
                                        }
                                        .show-hidden {
                                            position: absolute;
                                            top: -15rpx;
                                            right: 24rpx;
                                            width: 30rpx;
                                            height: 30rpx;
                                            color: #b0b0b0;
                                            text{
                                                font-size: 30rpx;
                                            }
                                        }
                                        }
                                
                                        .item-content-info {
                                            color: #8b8b8b;
                                            font-size: 24rpx;
                                        }
                                    }
                                    .item-content-show{
                                        border: none;
                                    }
                                }
                                .compliance-item-bottom{
                                    background-color: #eff2fb;
                                    font-size: 24rpx;
                                    padding: 30rpx 15rpx;
                                    border-radius: 5rpx;
                                }
                            

                                }
                            }
                        }
                    }
                    // 指标无数据
                    .empty-compliance {
                        margin-bottom: 15rpx;
                        padding: 0 18rpx;
                        width: 100%;
                        box-sizing: border-box;
                        // background-color: #e3e6ee;
                        .empty-compliance-container{
                            background-color: #fff;
                            border-radius: 20rpx;
                            padding: 0 32rpx;
                            box-shadow: 0 15rpx 30rpx rgb(0 0 0 / 10%);
                            &::after{
                                content: "";
                                display: block;
                                height: 64rpx;
                            }
                            .empty-compliance-title {
                                height: 74rpx;
                                border-bottom: 1rpx solid #e6e6e6;
                                font-size: 28rpx;
                                line-height: 74rpx;
                                color: #6d6d6d;
                                .text {
                            
                                }
                            }
                            
                            .empty-compliance-content {
                                .empty-compliance-item {
                                .empty-compliance-item-top{
                                    display: flex;
                                    .item-icon {
                                        width: 96rpx;
                                        height: 115rpx;
                                        image{  
                                            margin-top: 15rpx;
                                            width: 60rpx;
                                            height: 60rpx;
                                        }
                                    }
                                
                                    .item-content {
                                        flex: 1;
                                        padding-bottom: 20rpx;
                                        border-bottom: 1rpx solid #e6e6e6;
                                        .item-content-title {
                                            position: relative;
                                            margin-top: 24rpx;
                                        .title-text {
                                            font-size: 32rpx;
                                            margin-right: 46rpx;
                                        }
                                
                                        .title-val {
                                            font-size: 30rpx;
                                            font-weight: bold;
                                        }
                                
                                        .title-standard {
                                            position: absolute;
                                            top: -5rpx;
                                            right: 38rpx;
                                            padding:0 18rpx;
                                            border-radius: 20rpx;
                                            background-color: #7f7f7f;
                                            font-size: 24rpx;
                                            color: #fff;
                                        }
                                        .show-hidden {
                                            position: absolute;
                                            top: -15rpx;
                                            right: 24rpx;
                                            width: 30rpx;
                                            height: 30rpx;
                                            color: #b0b0b0;
                                            text{
                                                font-size: 30rpx;
                                            }
                                        }
                                        }
                                
                                        .item-content-info {
                                            color: #8b8b8b;
                                            font-size: 24rpx;
                                        }
                                    }
                                    .item-content-show{
                                        border: none;
                                    }
                                }
                                .empty-compliance-item-bottom{
                                    background-color: #eff2fb;
                                    font-size: 24rpx;
                                    padding: 30rpx 15rpx;
                                    border-radius: 5rpx;
                                }
                            

                                }
                            }
                        }
                    }
            }
          }


        }
      }

  }